<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <el-form
        v-if="$route.query.type == 2"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="顾问姓名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入顾问姓名" />
        </el-form-item>
        <el-form-item label="用户头像" prop="avatar">
          <Upload v-model="form.avatar" @clear="clearImageValidate" />
        </el-form-item>
        <el-form-item label="电话" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="权重" prop="weight">
          <el-input
            style="width:100px;"
            @input="filter0_100(form,'weight')"
            v-model="form.weight"
            placeholder="请输入权重"
          />
        </el-form-item>
        <el-form-item label="微信号" prop="wxNumber">
          <el-input v-model="form.wxNumber" placeholder="请输入微信号" />
        </el-form-item>
        <el-form-item label="个人标签">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
        </el-form-item>

        <el-form-item label="顾问详情" prop="advisorDetail">
          <Editor v-model="form.advisorDetail" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>

      <div v-else class="deatil">
        <div class="avatar">
          <el-image class="img" :src="form.avatar"></el-image>
        </div>
        <div class="info">
          <div class="item">
            <span>姓名</span>
            <span>{{form.userName}}</span>
          </div>

          <div class="item">
            <span>服务客户数量</span>
            <span>{{form.serviceNumber}}</span>
          </div>

          <div class="item">
            <span>电话</span>
            <span>{{form.phonenumber}}</span>
          </div>

          <div class="item">
            <span>邮箱</span>
            <span>{{form.email}}</span>
          </div>

          <div class="item">
            <span>微信号</span>
            <span>{{form.wxNumber}}</span>
          </div>

          <div class="item">
            <span>添加时间</span>
            <span>{{form.createTime}}</span>
          </div>
          <div class="item">
            <span>顾问简介</span>
            <div style="margin-left: 110px;display:block;" v-html="form.advisorDetail"></div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import Editor from "@/components/Editor";
import Upload from "@/components/Upload";
import { getAdvisor, addAdvisor, updateAdvisor } from "@/api/system/advisor";

export default {
  name: "AdvisorEdit",
  components: {
    Editor,
    Upload
  },
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      title: "添加顾问",
      // 表单参数
      form: {
        userName: "",
        avatar: "",
        phonenumber: "",
        email: "",
        wxNumber: "",
        advisorDetail: "",
        advisorLabel: "",
        weight: 0
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "请输入顾问姓名", trigger: "blur" }
        ],
        avatar: [{ required: true, message: "请上传用户头像" }],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        wxNumber: [
          { required: true, message: "请输入微信号", trigger: "blur" }
        ],
        advisorDetail: [
          { required: true, message: "请输入顾问详情", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    clearImageValidate() {
      this.rules.newsCover = [];
      this.$refs["form"].clearValidate("newsCover");
    },
    getEditInfo() {
      const id = this.$route.query.id;
      if (id) {
        getAdvisor(id).then(response => {
          this.form = response.data;
          this.dynamicTags = response.data.advisorLabel
            ? response.data.advisorLabel.split(",")
            : [];
          this.$nextTick(() => {
            document.body.scrollIntoView();
          });
        });
        if (this.$route.query.type == 1) {
          this.title = "顾问详情";
        } else {
          this.title = "修改顾问";
        }
      }
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            const advisorLabel =
              this.dynamicTags.length > 0 ? this.dynamicTags.join(",") : "";
            const postData = {
              ...this.form,
              advisorLabel,
              advisorDetail: this.filterContent(this.form.advisorDetail)
            };
            updateAdvisor(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.go(-1);
              }
            });
          } else {
            const advisorLabel =
              this.dynamicTags.length > 0 ? this.dynamicTags.join(",") : "";
            const postData = {
              ...this.form,
              advisorLabel,
              advisorDetail: this.filterContent(this.form.advisorDetail)
            };
            addAdvisor(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
                this.$router.go(-1);
              }
            });
          }
        }
      });
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.item {
  font-size: 14px;
  padding: 18px 0;
  span:first-child {
    width: 90px;
    display: inline-block;
    text-align: right;
  }
  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }
  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
.deatil {
  display: flex;
  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    .img {
      height: 100%;
    }
    /deep/ img {
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
  }
}
</style>
